<template>
  <Panel tite="修改密码">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="原密码" prop="oldPwd">
        <el-input
          type="password"
          v-model="ruleForm.oldPwd"
          autocomplete="off"
           placeholder="请输入原密码"
        ></el-input>
      </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
        <el-input
          type="password"
          v-model="ruleForm.newPwd"
          autocomplete="off"
           placeholder="请输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
           placeholder="请输入新密码"
        ></el-input>
      </el-form-item>
   
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即修改</el-button
        >
        <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </Panel>
</template>

<script>
import { checkOldPwd, validatePass, validatePass2} from '@/utlis/validate'
import {editpwdReq} from '@/api/account.api'
export default {
  data() {

    return {
      ruleForm: {
    
        checkPass: "",
        id: " ",
        oldPwd: "",
        newPwd:"",
       
       
      },
      rules: {
        newPwd: [{ validator: validatePass.bind(this),trigger: "blur" }],
        checkPass: [{ validator: validatePass2.bind(this),trigger: "blur" }],
        oldPwd: [{ validator: checkOldPwd, trigger: "blur" }],
      },
    };
  },

  methods: {
    submitForm(formName) {
      // 验证表单是否通过 通过了才请求axios
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
        const res = await editpwdReq(this.ruleForm);
        console.log(res);
        // 第一步发送请求
          this.$message.success('修改密码成功，请重新登录')
          // 第二步删除本地缓存
          // localStorage.clear();
          //第三步 跳转到登录页
          this.$router.push('/login');
         
        }else{
          this.$message.error(msg);
        }
   
   });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },

  // created(){
  //   this.ruleForm.id = localStorage.getItem('id')
  // }
};
</script>

<style lang="less" scoped>
      .el-input{
        width: 300px;
      }
</style>